<template>
  <div class="main">
    <el-row class="bt-row">
        <h2>Message Board</h2>
    </el-row>
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="createDt" label="Date" width="180">
      </el-table-column>
      <el-table-column prop="fullName" label="FullName" width="180">
      </el-table-column>
      <el-table-column prop="emailAddress" label="Email" width="180">
      </el-table-column>
      <el-table-column prop="phoneNumber" label="Phone" width="180">
      </el-table-column>
      <el-table-column prop="message" label="Message"> </el-table-column>

      <el-table-column fixed="right" label="OP" width="60">
        <template slot-scope="scope">
          
          <el-button @click="handleClick(scope.row)" type="danger" icon="el-icon-delete" circle size="small"  style="display:block;margin:5px 3px"
            ></el-button
          >

        </template>
      </el-table-column>
    </el-table>

    <el-row>
      <el-pagination
        layout="prev, pager, next"
        :total="total"
        :current-page.sync="currentPage"
        :page-size="pageSize"
        @current-change="pageClick"
        >
      </el-pagination>
      
    </el-row>
  </div>
</template>
 
 <script>
import { getlist, deleteOne } from "@/api/msgboard";

export default {
  data() {
    return {
      tableData: [],
      currentPage:1,
      total:0,
      pageSize:20,
    };
  },
  created() {
    this.getData();
  },
  methods: {
    getData() {
      getlist(this.currentPage, this.pageSize).then((response) => {
        console.log(response);
        var records = response.data.records;
        records.forEach((item, index) => {
          var dt = item.createDt + "";
          var s1 =
            dt.substring(0, 4) +
            "-" +
            dt.substring(4, 6) +
            "-" +
            dt.substring(6, 8);
          item.createDt = s1;
        });
        this.tableData = records;
        this.total = response.data.total;
        this.pageSize = response.data.size;
        this.currentPage = response.data.current;
      });
    },
    handleClick(row) {
      console.log(row);
      this.$confirm("delete record?", "hint", {
        confirmButtonText: "OK",
        cancelButtonText: "cancel",
        type: "warning",
      })
        .then(() => {
          deleteOne(row.id)
            .then((res1) => {
              this.$message({
                type: "success",
                message: "delete record!",
              });
              this.getData();
            })
            .catch(() => {
              this.$message({
                type: "error",
                message: "failed",
              });
            });
        })
        .catch(() => {
          // this.$message({
          //   type: 'info',
          //   message: 'cancel'
          // });
        });
    },

    pageClick(){
      this.getData()
    }
  },
};
</script>
 
 <style>

.main {
  padding: 8px;
}

.bt-row {
  padding: 8px;
}

</style>